<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>讲出你的故事，寻找你的守护</title>
    <meta name="description" content="来花开，和我一起听故事！" />
    <script data-hdkey="hktrust" src="/static/js/flexible.js"></script>
    <link rel="stylesheet" href="/static/css/yuyin/storyKing/index.css?v=20181120005">
    <link rel="stylesheet" href="/static/css/yuyin/storyKing/radiobo.css">
    <script data-hdkey="hktrust" src="/static/js/util.js"></script>
    <script data-hdkey="hktrust" src="/static/js/jquery.min.js"></script>
    <script data-hdkey="hktrust" src="/static/js/lib/RequestClient.js?v=201811212"></script>
    <script data-hdkey="hktrust" src="/static/js/lib/HijackingDefense.js?v=201811212"></script>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
    <div data-hdkey="hktrust" id="menu" style="display: none;">
        <ul>
            <li><a href="#item1" class="current"><br/>参赛<br/>方式</a></li>
            <li><a href="#item2"><br/>排行<br/>榜单</a></li>
            <li><a href="#item3"><br/>活动<br/>案例</a></li>
        </ul>
    </div>
    <div data-hdkey="hktrust" class="story_box">
        <div class="part1 item" id="item1">
            <div id="title">
                <p>说出你的故事</p>
                <p class="p2">赢五万大奖</p>
            </div>
            <div>
                <div class="ruler">
                    <h1>活动规则</h1>
                    <p>参与方式：“发语音”讲故事，标题格式：【花开故事王】+内容（按照格式参与才有效哦）<br><br />活动时间：11月20日—12月5日</p>
                </div>
                <div class="tutorial">
                    <h1>参与教程</h1>
                    <p><img src="http://huakai-static.oss-cn-shenzhen.aliyuncs.com/manual/activity/storyking/tutorial.gif" alt=""></p>
                </div>
                <div class="reward">
                    <h1>活动奖励</h1>
                    <p>
                        1.<span class="color_f05c5c">花开故事王(1名)</span>:偷听数量最多的单条语音,奖励50000花瓣;<br>
                        2.<span class="color_f05c5c">最佳人气奖(3名)</span>:收到“传声筒”数量最多的前3条语音,按单条语音收到的传声筒的10%来奖励,比如:某语音收到1000个传声筒,奖励花瓣计算:1000个*699花瓣*10%=69900花瓣;<br>
                        3.<span class="color_f05c5c">幸运奖(10名)</span>:从所有参与者中随机抽取,奖励“花开定制公仔”;
                    </p>
                </div>
            </div>
            <div class="showpic">
                <p>
                    <img src="/static/img/yuyin/storyKing/chuanshengtong-v2.png" alt="">
                    <span>传声筒</span>
                </p>
                <p style="float: right">
                    <img src="/static/img/yuyin/storyKing/wawa.png" alt="">
                    <span>花开定制公仔</span>
                </p>
            </div>
            <div class="showpic2">
                <img src="/static/img/yuyin/storyKing/zuanshi.png" />
            </div>
            <div>

            </div>
        </div>
        <div class="part2 item" id="item2">
            <div class="con_main">
                <div class="story_king">
                    <h1>故事王排行榜</h1>
                    <ul class="list1" id="story_king_list">
                        <!--<li>-->
                            <!--<b>NO1.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<b>NO2.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<b>NO3.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                    </ul>
                    <!--<span class="gen_data">活动数据生成中</span>-->
                </div>
                <div class="popularity">
                    <h1>人气王排行榜</h1>
                    <ul class="list1" id="popularity_list">
                        <!--<li>-->
                            <!--<b>NO1.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<b>NO2.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<b>NO3.</b><img src="img/headpic.jpg" alt=""><span>用户昵称</span>-->
                        <!--</li>-->
                    </ul>
                    <!--<span class="gen_data">活动数据生成中</span>-->
                </div>
            </div>

        </div>
        <div class="part3 item" id="item3">
            <h1>活动案例</h1>
            <div class="con_box" style="margin-top: 0.6rem;position: relative">
                <div data-vTime="98" flag="false" class="con">
                    <div class="con-head">
                        <div >
                            <img class="pichead" src="/static/img/yuyin/storyKing/four.png" alt="">
                            <p>
                                <b>雪儿</b>
                                <img src="/static/img/yuyin/storyKing/sexnv.png" alt="">
                                <span>24岁</span>
                            </p>
                            <p>
                                <strong>2018.11.21</strong>
                                <img class="dress" src="/static/img/yuyin/storyKing/positionpic.png" alt="">
                                <strong>北京市</strong>
                            </p>
                        </div>
                        <span class="attention">关注</span>
                    </div>
                    <div class="con-main">
                        <p><b>【花开故事王】</b>听过很多有意思的故事，搞笑的、感人的、惊悚的，想跟大家分享一个让我印象很深刻的关于选择和时机的故事。</p>
                        <div class="radioM" style=" cursor: pointer;" data-vtime="32">
                            <div class="radiobg">
                                <div class="radio-pic">
                                    <img src="/static/img/yuyin/storyKing/four.png" alt="">
                                    <a href="javascript:;" style="cursor: pointer" class="play">
                                        <img style="cursor: pointer" src="/static/img/yuyin/storyKing/play.png" alt=""></a>
                                </div>
                                <div class="colorfulPulse" class="colorfulPulse">
                                    <span class="item-1"></span>
                                    <span class="item-2"></span>
                                    <span class="item-3"></span>
                                    <span class="item-4"></span>
                                    <span class="item-5"></span>
                                    <span class="item-6"></span>
                                    <span class="item-7"></span>
                                    <span class="item-8"></span>
                                    <span class="item-9"></span>
                                    <span class="item-1"></span>
                                    <span class="item-2"></span>
                                    <span class="item-3"></span>
                                    <span class="item-4"></span>
                                    <span class="item-5"></span>
                                    <span class="item-6"></span>
                                    <span class="item-7"></span>
                                    <span class="item-8"></span>
                                    <span class="item-9"></span>
                                    <span class="item-1"></span>
                                    <span class="item-2"></span>
                                    <span class="item-3"></span>
                                    <span class="item-4"></span>
                                </div>
                                <p  class="times">0:32</p>
                            </div>
                        </div>
                        <audio class="bgMusic" loop="loop">
                            <source src="http://huakai-static.oss-cn-shenzhen.aliyuncs.com/material/%E7%B4%A0%E6%9D%904.mp3" type="audio/mp3">
                        </audio>
                    </div>
                </div>
            </div>
        </div>
        <div class="bot1"></div>
        <div class="bot2">
            <p>本活动最终解释权归花开App所有</p>
        </div>
    </div>
    <script data-hdkey="hktrust">
        var accessId = getParameter("x-access-id") ? getParameter("x-access-id") : 0;
        var accessToken = getParameter("x-access-token") ? getParameter("x-access-token") : '';
        var ua = getParameter("x-ua") ? getParameter("x-ua") : 'unknown';
        var version=getParameter("x-version-code")? getParameter("x-version-code") : 0;
        var channel=getParameter("x-channel")? getParameter("x-channel") : 'unknown';
        $(function () {
            $(".con_box").find(".con").each(function () {
                var _this=$(this);
                getTime();
                function getTime() {
                    setTimeout(function () {
                        var duration = parseInt(_this.attr("data-vTime"));
                        // 设置初始时间
                        var audio=_this.find(".bgMusic");
                        var img=_this.find(".play").children("img");
                        var times= _this.find(".times");
                        var colorfulPulse=_this.find(".colorfulPulse>span");
                        var mohu=_this.find(".radio-pic").children("img").addClass("mohu");
                        times.html(timestr(duration));
                        var timer;
                        _this.click(function () {
                            if(audio[0].paused){
                                _this.find(".times").html(timestr(duration));
                                var durationT=duration;
                                img.attr("src","img/pasue.png");
                                colorfulPulse.addClass("animates");
                                mohu.removeClass("mohu");
                                play(audio);
                                timer= setInterval(function () {
                                    if(durationT>0){
                                        durationT--;
                                        times.html(timestr(durationT));
                                    }else{
                                        window.clearInterval(timer);
                                        img.attr("src","img/olay.png");
                                        colorfulPulse.removeClass("animates");
                                        mohu.addClass("mohu");
                                        times.html(timestr(duration));
                                        pause(audio);
                                    }
                                },1000);
                            }else{
                                clearInterval(timer);
                                img.attr("src","img/olay.png");
                                colorfulPulse.removeClass("animates");
                                mohu.addClass("mohu");
                                times.html(timestr(duration));
                                pause(audio);
                            }
                        })
                    }, 100);
                }
            });
            $(window).scroll(function(){
                changeNav();
            });
            $(".item").click(function () {
                changeNav();
            });
            var headers = {
                "x-access-id": accessId,
                "x-access-token": accessToken,
                "x-ua": ua,
                "x-version-code": version,
                "x-channel": channel
            };
            var data = {};
            RequestClient.create("/h5/activity/voice/story/ranking", headers, data, listRender).doRequest();
        })
        var changeNav = function () {
            var scrollTop = $(document).scrollTop();
            var contentItems = $(".story_box").find(".item");
            var currentItem = "";
            contentItems.each(function(){
                var contentItem = $(this);
                var offsetTop = contentItem.offset().top;
                if(scrollTop >= offsetTop-10){//此处的200视具体情况自行设定，因为如果不减去一个数值，在刚好滚动到一个div的边缘时，菜单的选中状态会出错，比如，页面刚好滚动到第一个div的底部的时候，页面已经显示出第二个div，而菜单中还是第一个选项处于选中状态
                    currentItem = "#" + contentItem.attr("id");
                }
            });
            if(currentItem && currentItem!=$("#menu").find(".current").attr("href")){
                $("#menu").find(".current").removeClass("current");
                $("#menu").find("[href=" + currentItem + "]").addClass("current");
            }
        };
        //列表数据渲染
        var listRender = function(res) {
            if(res.code != ERROR_CODE.SUCCESS) {
                alertMsg(res.message);
                return;
            }
            var data = res.data;
            var popularityRankingList = data.popularityRankingList;
            for(var i = 0; i < popularityRankingList.length; i++) {
                var item = popularityRankingList[i];
                var li = $('<li><b>NO' + (i+1) + '.</b><img src="' + item.avatarUrl + '" alt=""><span>' + item.nickName + '</span></li>');
                $("#popularity_list").append(li);
            }
            var storyRankingList = data.storyRankingList;
            for(var i = 0; i < storyRankingList.length; i++) {
                var item = storyRankingList[i];
                var li = $('<li><b>NO' + (i+1) + '.</b><img src="' + item.avatarUrl + '" alt=""><span>' + item.nickName + '</span></li>');
                $("#story_king_list").append(li);
            }
        };
        function pause(audio) {
            // 停止
            audio[0].pause();
            audio[0].load()
            audio.value="暂停";
        }
        function play(audio) {
            // 播放
            audio[0].play();
            audio.value="播放";
        }
        function timestr(time) {
            var str;
            if(time<10){
                str="0:0"+time
            }else if(10<= time && time<60){
                str="0:"+time
            }else if(time>=60){
                var fen=parseInt(time/60);
                var s= parseInt(time%60)>10 ? parseInt(time%60) : "0"+parseInt(time%60);
                str=fen+":"+s;
            }
            return str;
        }
    </script>
</body>
<script data-hdkey="hktrust" src="/static/js/common/Monitor.js"></script>
</html>